<template>
  <div class="wrapper">
    <img src="http://www.dell-lee.com/imgs/vue3/user.png" class="wrapper_img" />
    <validate-form @form-submit="onFormSubmit">
      <div class="wrapper_input">
        <validate-input
          :rules="emailRules"
          v-model="emialVal"
          placeholder="请输入邮箱地址"
          type="text"
        />
      </div>
      <div class="wrapper_input">
        <validate-input
          :rules="passwordRules"
          v-model="passwordVal"
          placeholder="请输入密码"
          type="password"
        />
      </div>
      <div class="wrapper_input">
        <validate-input
          :rules="repeatPasswordRules"
          v-model="repeatPasswordVal"
          placeholder="确认密码"
          type="password"
        />
      </div>
      <template #submit>
        <div class="wrapper_login-button">注册</div>
      </template>
    </validate-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import ValidateInput, { RulesProp } from '@/components/ValidateInput.vue'
import ValidateForm from '@/components/ValidateForm.vue'

export default defineComponent({
  name: 'Home',
  components: { ValidateInput, ValidateForm },
  setup() {
    const emialVal = ref('')
    const passwordVal = ref('')
    const repeatPasswordVal = ref('')
    const emailRules: RulesProp = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      { type: 'email', message: '请输入正确的电子邮箱格式' }
    ]
    const passwordRules: RulesProp = [
      { type: 'required', message: '密码不能为空' },
      { type: 'rang', message: '密码长度应为6-15个字符' }
    ]
    const repeatPasswordRules: RulesProp = [
      { type: 'required', message: '确认密码不能为空' },
      { type: 'rang', message: '密码长度应为6-15个字符' },
      {
        type: 'custom',
        message: '两次密码不相同',
        validator: () => {
          return repeatPasswordVal.value === passwordVal.value
        }
      }
    ]
    const onFormSubmit = (result: boolean) => {
      if (result) {
        console.log(111)
      }
    }
    return { emailRules, emialVal, passwordVal, passwordRules, repeatPasswordVal, repeatPasswordRules, onFormSubmit }
  }
})
</script>

<style lang="scss" scoped>
.wrapper {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  &_img {
    display: block;
    margin: 0 auto 0.4rem auto;
    width: 0.66rem;
    height: 0.66rem;
  }
  &_input {
    margin: 0 0.4rem 0.16rem 0.4rem;
    &_content {
      margin-top: 0.12rem;
      line-height: 0.22rem;
      border: none;
      outline: none;
      width: 100%;
      background: none;
      font-size: 0.16rem;
      color: #777;
      &::placeholder {
        color: #777;
      }
    }
  }
  &_login-button {
    line-height: 0.48rem;
    background: #0091ff;
    box-shadow: 0 0.04rem 0.08rem 0 rgba(0, 145, 255, 0.32);
    border-radius: 0.04rem;
    border-radius: 0.04rem;
    color: #fff;
    font-size: 0.16rem;
    text-align: center;
  }
}
</style>
